import React, { useEffect, useMemo, useRef, useState } from "react";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import * as GC from "@grapecity/spread-sheets";
import { Designer } from "@grapecity/spread-sheets-designer-react";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import { Modal, Input } from "antd";
import "antd/dist/antd.css";

GC.Spread.Common.CultureManager.culture("zh-cn");

const Tag = () => {
  const [visible, setVisible] = useState(false);
  const [info, setInfo] = useState("");
  const [row, setRow] = useState(0);
  const [col, setCol] = useState(0);

  const d = useRef({ designer: {} });
  const input = useRef();

  const config = useMemo(() => {
    var designerConfig = JSON.parse(
      JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
    );

    designerConfig.commandMap = {
      Formular: {
        text: "设置绑定公式",
        commandName: "setFormular",
        visibleContext: "ClickViewport",
        execute: (spread, options, { activeRow, activeCol }) => {
          const info = d.current.designer
            .getWorkbook()
            .getActiveSheet()
            .getTag(activeRow, activeCol);
          setInfo(info);
          setVisible(true);
          setRow(activeRow);
          setCol(activeCol);
          input.current.focus();
        },
      },
      RemoveFormular: {
        text: "取消绑定公式",
        commandName: "RemoveFormular",
        visibleContext: "ClickViewport",
        execute: (spread, options, { activeRow: row, activeCol: col }) => {
          const sheet = d.current.designer.getWorkbook().getActiveSheet();
          sheet.setTag(row, col, "");
          sheet.setText(row, col, "");
        },
      },
      RepeatRow: {
        text: "设置重复行",
        commandName: "setRepeatRow",
        visibleContext: "ClickRowHeader ",
        execute: (spread, options, { activeRow: row, activeCol: col }) => {
          const sheet = d.current.designer.getWorkbook().getActiveSheet();
          console.log(sheet.getTag(row, col - 1));
          sheet.setTag(row, col - 1, "repeat");
          sheet.getCell(row, col - 1).backColor("red");
        },
      },
      RemoveRepeatRow: {
        text: "取消重复行",
        commandName: "RemoveRepeatRow",
        visibleContext: "ClickRowHeader ",
        execute: (spread, options, { activeRow: row, activeCol: col }) => {
          const sheet = d.current.designer.getWorkbook().getActiveSheet();
          sheet.setTag(row, col - 1, undefined);
          sheet.getCell(row, col - 1).backColor("white");
        },
      },
    };

    let cm = designerConfig.contextMenu;

    // 移除内置的tag上下文菜单项
    cm = cm.filter(
      (c) => !["cellTag", "rowTag", "colTag", "sheetTag"].includes(c)
    );

    // 添加自定义菜单项
    cm.push(
      "Formular",
      "separator",
      "RemoveFormular",
      "RepeatRow",
      "RemoveRepeatRow"
    );

    designerConfig.contextMenu = cm;

    return designerConfig;
  }, []);

  useEffect(() => {
    const sheet = d.current.designer.getWorkbook().getActiveSheet();
    sheet.setRowCount(10);
  }, []);

  return (
    <>
      <Designer
        styleInfo={{ width: "100%", height: "calc(100vh - 100px)" }}
        ref={d}
        config={config}
      />
      <Modal
        title="自定义数据源"
        visible={visible}
        width={600}
        centered
        maskClosable={false}
        onCancel={() => setVisible(false)}
        onOk={() => {
          const sheet = d.current.designer.getWorkbook().getActiveSheet();
          sheet.setTag(row, col, info);
          sheet.setText(row, col, `[${info}]`);
          setInfo("");
          setVisible(false);
        }}
      >
        <Input
          ref={input}
          value={info}
          onChange={(e) => setInfo(e.target.value)}
        />
      </Modal>
    </>
  );
};

export default Tag;
